<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :flex="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          height="50"
          title="发放优惠券明细"
          title-size="36"
          back-icon-color="#333"
          title-color="#333"
        ></u-navbar>
      </view>
      <view v-if="type == 3" class="coupon-banner">
        <view class="title-tip">满200立减10元</view>
        <view class="title">1000张</view>
        <view class="coupon-push-info">
          <view class="info-item">
            <view class=""> 900张 </view>
            <p>已领取</p>
          </view>
          <view class="info-item">
            <view class=""> 100张 </view>
            <p>已使用</p>
          </view>
          <view class="info-item">
            <view class=""> 800张 </view>
            <p>未使用</p>
          </view>
          <view class="info-item">
            <view class=""> 1000张 </view>
            <p>还剩余</p>
          </view>
        </view>
      </view>
      <view v-else-if="type == 2" class="coupon-banner">
        <view class="title-tip">参与限时抢购订单</view>
        <view class="title">1000单</view>
        <view class="coupon-push-info">
          <view class="info-item">
            <view class=""> 900单 </view>
            <p>已完成</p>
          </view>
          <view class="info-item">
            <view class=""> 100单 </view>
            <p>待付款</p>
          </view>
          <view class="info-item">
            <view class=""> 5单 </view>
            <p>已取消</p>
          </view>
        </view>
      </view>

      <view v-else-if="type == 1" class="coupon-banner">
        <view class="title-tip">参与团购订单</view>
        <view class="title">1000单</view>
        <view class="coupon-push-info">
          <view class="info-item">
            <view class=""> 900单 </view>
            <p>已完成</p>
          </view>
          <view class="info-item">
            <view class=""> 100单 </view>
            <p>待付款</p>
          </view>
          <view class="info-item">
            <view class=""> 5单 </view>
            <p>已取消</p>
          </view>
        </view>
      </view>

      <view class="" style="padding: 20rpx">
        <view style="background-color: #fff; border-radius: 10rpx">
          <view
            class=""
            style="
              padding: 20rpx;
              font-size: 32rpx;
              color: #999999;
              border-bottom: 1px solid #ededed;
            "
          >
            参与明细
          </view>
          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <u-avatar src="/static/img/gimg.png" size="70"></u-avatar>
            <view class="itemHead">
              <view class="itemTitle">用户</view>
              <view class="itemMin">136*****8</view>
            </view>
            <view class="itemTime">
              <view v-if="type == 3" class="" style="font: 24rpx"> 未使用 </view>
              <view v-else class=""> 待付款 </view>
              <view class="itemMin">领取时间：2023-09-28 17:32</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      type: '',
      current: 0,
      tabList: [
        {
          name: '收益记录'
        },
        {
          name: '提现记录'
        }
      ],
      itemList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
    }
  },
  onLoad(otions) {
    this.type = otions.type
  },
  methods: {
    tabsChange(index) {
      this.current = index
    },
    queryList(page, pageSize) {
      this.$refs.paging.complete(this.itemList)
    },
    onWithdrawal() {
      this.$utils.route('/other/withdrawal/withdrawal')
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style>
page {
  background: #f0f1f2;
}
.coupon-banner {
  padding: 20rpx;
  background-color: #fff;
}
.title-tip {
  font-size: 24rpx;
  padding: 15rpx 45rpx;
}
.title {
  font-size: 48rpx;
  padding: 15rpx 45rpx;
}

.info-item view {
  font-size: 30rpx;
}

.coupon-push-info {
  display: flex;
  justify-content: space-around;
  padding: 15rpx 0;
}

.info-item p {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}

.itemView {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemHead {
  flex: 1;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}
.itemMin {
  font-size: 20rpx;
  color: #999999;
}

.itemTitle {
  font-size: 24rpx;
}

.itemTime {
  text-align: right;
  font-size: 22rpx;
  font-weight: 400;
  color: #666666;
  margin-top: 15rpx;
}
</style>
